<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
			@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">子账号管理</text>
		</navBar>
		
		<scroll-view
		:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
		scroll-y
		@scrolltolower="scrolltolower"
		class="main_sendAccountNumber pd10"
		>
			<template v-if="AccountNumberlist.length">
				<view
				v-for="(item,index) in AccountNumberlist"
				:key="index"
				@click="updateItem(item)"
				class="main_sendAccountNumber_item pd10 mt10">
					<view class="main_sendAccountNumber_item_t">
						<view class="main_sendAccountNumber_item_t_l">
							<text>{{item.name ? item.name : ''}}</text>
							<!-- <image src="./static/nan.svg"></image> -->
						</view>
						<view 
						@click.stop="delAccount(item)"
						class="main_sendAccountNumber_item_t_r">
							<image :src="xcxImgUrl && xcxImgUrl+'shanchu.svg'"></image>
						</view>
					</view>
					<view class="main_sendAccountNumber_item_b">
						<!-- <view class="mt10">
							职务：产品经理
						</view> -->
						<view class="mt10">
							手机号码：{{item.phone ? item.phone : ''}}
						</view>
					</view>
				</view>
			</template>
			<view class="noShopping"
				v-if="AccountNumberlist.length==0">
				<image style="width: 400rpx;height: 260rpx;"
					mode="aspectFill"
					:src="xcxImgUrl && xcxImgUrl+'shopping/kong_icon.svg'"></image>
				<text class="mt10">暂无子账号信息！！</text>
			</view>
		</scroll-view>
		
		<view
		
		@click="invitationCodeShow = true"
		class="main_sendAccountNumber_btn">
			<newBtn 
			bgColor="#EC4141"
			color="#FFF"
			name="邀请职员"></newBtn>
		</view>
		
		<view class="custom_class">
		<u-popup mode="bottom"
			:round="20"
			:show="invitationCodeShow"
			@close="invitationCodeShow = false"
			:closeable="true">
			<view class="invitationCode" style="border-radius:40rpx">
				<view class="caption">分享绑定子账号</view>
				<view class="content">
					<view class="user_info">
						<view class="avatar">
							<image :src="avatarUrl" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="name">{{userName}}</view>
							<view class="tag">邀请您加入职员账户</view>
						</view>
					</view>
					<view class="qrcode">
						<image :src="uploadImgUrl+ewm" mode="widthFix" class="img"></image>
					</view>
					<view class="text">打开微信扫一扫扫描二维码</view>
				</view>
				<button open-type="share" class="btn">分享给好友</button>
			</view>
		</u-popup>
		</view>
		
		<!-- <view 
		@click="toAddSendAccountNumber"
		class="main_sendAccountNumber_btn">
			<newBtn 
			bgColor="#EC4141"
			color="#FFF"
			name="新增子账号"></newBtn>
		</view> -->
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {uploadImgUrl} from "@/utils/request.js"
	import {listMallMemberSonPageInfo,deleteMallMemberById,unbindChildAccount,getWxQRCode } from '@/api/global.js'
	export default {
		computed:{
			...mapGetters(['demoTopHieght']),
			avatarUrl(){
				return uni.getStorageSync('visitorLoginInfo') ? JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.headUrl || this.xcxImgUrl+'myde/touxiang.svg': this.xcxImgUrl+'myde/touxiang.svg'
			},
			userName(){
				return uni.getStorageSync('visitorLoginInfo') ? JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.name : `-`;
			}
		},
		components:{
			newBtn
		},
		data() {
			return {

				uploadImgUrl,
				invitationCodeShow:false,
				statusBarHeight:'', 
				height:'',
				pageData:{
					currentPage:1,
					pageSize:10
				},
				lastPage:0,
				AccountNumberlist:[],
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'温馨提醒',
					content:''
				},
				memberId:'',//要删除的账号id
				ewm:``,
			};
		},
		onLoad() {
			this.getCodeUrl();
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_sendAccountNumber')
				//获取数据
				this.pageData.currentPage = 1;
				this.getList()
			})
		},
		methods:{
			//获取二维码链接展示
			async getCodeUrl(){
				let userId = uni.getStorageSync('visitorLoginInfo') ? JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.memberId : ''
				let res = await getWxQRCode({
					scene:`${userId}_3`
				})
				if(res.code == 2000){
					this.ewm = res?.data?.info
				}
			},
			//模态框确认
			async modalConfirm(){
				let res = await unbindChildAccount({memberId:this.memberId})
				if(res.code == 2000){
					this.Utils.toast('解除成功')
					this.modalShow = false
					this.pageData.currentPage = 1
					this.AccountNumberlist = []
					this.getList()
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			//删除子账号
			delAccount(item){
				this.memberId = item.memberId
				this.modalShow = true
				this.modalInfo.content = '是否确定解除当前子账号信息？？？'
			},
			//去新增子账号
			toAddSendAccountNumber(){
				uni.navigateTo({
					url:'/page_public/addSendAccountNumber'
				})
			},
			//编辑子账号
			updateItem(item){
				return;
				uni.navigateTo({
					url:`/page_public/addSendAccountNumber?obj=${JSON.stringify(item)}`
				})
			},
			//获取子账号列表
			async getList(){
				uni.showLoading()
				let res = await listMallMemberSonPageInfo({
					sort:1,
					...this.pageData
				})
				if(res.code == 2000){
					uni.hideLoading()
					if(this.pageData.currentPage == 1){
						this.AccountNumberlist = res?.data?.info?.list || [];
					}else{
						this.AccountNumberlist = this.AccountNumberlist.concat(res?.data?.info?.list || [])
					}
					this.lastPage = res?.data?.info?.lastPage
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			//滚动加载
			scrolltolower(){
				this.pageData.currentPage++
				if(this.pageData.currentPage > this.lastPage){
					return
				}else{
					this.getList()
				}
				
			},
			//返回上一级
			navToBack(){
				uni.switchTab({
					url:'/pages/myde/myde'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.invitationCode .content .user_info .avatar image.data-v-0030a81a {
		border-radius: 50% !important;
	}
	.custom_class /deep/ .u-popup__content__close{
		border-radius: 50%;
		border:2rpx solid #333;
		padding:6rpx;
		box-sizing: border-box;
		.u-icon__icon{
			font-size:24rpx!important;
			line-height: 24rpx!important;
		}
	}
	.invitationCode{
		background-color: rgba(245, 245, 245, 1);
		.caption{
			font-size:36rpx;
			font-weight: bold;
			padding:30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.content{
			background-color: #fff;
			padding:30rpx 20rpx;
			box-sizing: border-box;
			width:600rpx;
			margin:0 auto;
			border-radius: 10rpx;
			.user_info{
				display: flex;
				align-items: center;
				.avatar{
					width:120rpx;
					height:120rpx;
					border-radius: 50%;
					image{
						width:100%;
						height:100%;
					}
				}
				.info{
					margin-left:30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.name{
						font-size:32rpx;
						font-weight: bold;
					}
					.tag{
						font-size:24rpx;
						color:#333;
					}
				}
			}
			.qrcode{
				width:370rpx;
				margin:50rpx auto 0;
				image{
					width:100%;
					
				}
			}
			.text{
				font-size:28rpx;
				color:#999;
				margin-top:20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.btn{
			width:640rpx;
			height:88rpx;
			border-radius: 44rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(236, 65, 65, 1);
			color:#fff;
			font-size:32rpx;
			font-weight: bold;
			margin:	20rpx auto;
		}
	}
	.noShopping {
		width: 100%;
		height: 660rpx;
		box-sizing: border-box;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font_size_12;
		color: $text_color_333;
	}
	
	
	.main_sendAccountNumber{
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 130rpx;
		.main_sendAccountNumber_item{
			width: 100%;
			border-radius: $border_radius_10;
			background-color: #FFF;
			box-sizing: border-box;
			.main_sendAccountNumber_item_t{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 1px solid #f3f3f3;
				.main_sendAccountNumber_item_t_l{
					font-size: 32rpx;
					font-weight: bold;
					color: $text_color_333;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
						vertical-align: middle;
					}
				}
				.main_sendAccountNumber_item_t_r{
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.main_sendAccountNumber_item_b{
				color: $text_color_333;
				font-size: $font_size_14;
			}
		}
	}
	
.main_sendAccountNumber_btn{
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 40rpx;
	
}
</style>
